<script setup lang="ts">
  import { ref, reactive, onMounted, } from "vue"
  import { createMessage } from '@/Public-UIlibrary/pb-message/method'
  import { getLevelRoleList, getAllLevelList } from '@/api/Level'
  const pages = reactive({
    currentPage: 1,
    pageSize: 15,
    total: 100,
  })
  let loading = ref(false)
  let levelRoleData = reactive([
  ])
  const roleFormRef = ref()
  const roleSearchForm = reactive({
    roleName: '',
    tenantLevelId: '',
  })
  const levelRoleColumn = [{

    key: 'roleName',
    name: '角色名称',
  },
  {
    key: 'tenantLevelName',
    name: '所属层级',


  },
  {
    key: 'description',
    name: '角色描述',


  },
  {
    key: 'createTime',
    name: '创建时间',


  },
  {
    slot: 'operation',
    name: '操作',
    width: 200,
  }]
  // 层级列表
  let levelList = ref([

  ])
  // 角色弹窗
  const showRolePopup = ref(false)
  // 初始化
  const onit = () => {
    getLevelRoleListApi()
    getAllLevelListApi()
  }
  // 查询
  const onSearch = () => {
    getLevelRoleListApi()
  }
  // 重置
  const onReset = () => {
    console.log(roleFormRef);
    pages.currentPage = 1
    roleFormRef.value.resetFields()
    getLevelRoleListApi()
  }
  // 添加
  const onAddFn = () => {
    createMessage({
      message: '编辑成功',
      type: 'success'
    })
    // showRolePopup.value = true
  }
  // 分页改变
  const onPagesChange = () => {
    getLevelRoleListApi()

  }
  // 获取角色列表接口
  const getLevelRoleListApi = async () => {
    loading.value = true
    let { total, ...arg } = pages
    let res = await getLevelRoleList(
      {
        ...arg,
        sortingFields: [{
          field: "",
          order: ""
        }],
        ...roleSearchForm
      }
    )
    loading.value = false
    if (res.code == 2000) {
      levelRoleData = [...res.data.records]
      pages.total = res.data.total
    }
  }
  // 获取所有层级接口
  const getAllLevelListApi = async () => {
    let res = await getAllLevelList({})
    if (res.code == 2000) {
      console.log(...res.data)
      levelList.value = [...res.data]
      console.log(levelList)
    }
  }
  onMounted(() => {
    onit()
  })
</script>

<template>
  <div class="app-container flex flex-col">
    <SearchCard @onSearch="onSearch" @onReset="onReset()">
      <el-form ref="roleFormRef" :model="roleSearchForm" label-width="auto" :inline="true">
        <el-form-item label="角色名称" prop="roleName">
          <pb-input v-model="roleSearchForm.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="所属层级" prop="tenantLevelId">
          <pb-select v-model="roleSearchForm.tenantLevelId" placeholder="请选择所属层级" keys="tenantLevelId"
            label="tenantLevelName" :options="levelList" />
        </el-form-item>
      </el-form>
    </SearchCard>
    <pb-card padding="0px " class="flex-1">
      <ContentOperation>
        <pb-button size="small" plain @click="onAddFn">+添加</pb-button>
      </ContentOperation>
      <pb-card>
        <pb-table :tableData='levelRoleData' :column='levelRoleColumn' :loading="loading">
          <template slot-scope="{ row }" v-slot:operation>
            <pb-button text class="mr-6">编辑</pb-button>
            <pb-button text>删除</pb-button>
            <div class="flex">

            </div>
          </template>
        </pb-table>
        <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
          @onChange="onPagesChange" :total="pages.total"></pb-pagination>
      </pb-card>
    </pb-card>
    <pb-popup v-model="showRolePopup"></pb-popup>
  </div>
</template>

<style lang="less" scoped></style>